<template>
	<div style="display: flex;flex-direction: column;height:100%;" class="wood">
		<div style="flex: 1;"></div>
		<div style="flex: 3;display: flex;flex-direction:row;width:100%;height: 350px;">

			<img style="flex: 3;" class="carousel-image" src="./img/civilization.jpg" />
			<div style="flex: 5;display: flex;flex-direction: column;height:100%">
				<div style="flex: 1;">
					<h1>社区讨论留言板</h1>
				</div>

				<div style="flex: 4;padding-left: 30px;padding-right: 50px;">
					<p>亲爱的社区邻居们，欢迎来到咱们社区专属的话题留言板！这里是我们交流想法、分享生活、解决疑问的小天地。</p>
					<p>在留言板上，大家遵守法律法规和社区规定，使用文明用语，尊重他人的隐私和权利，不要发表攻击、侮辱、诽谤他人的言论。发布的话题和回复要保证信息真实可靠，不要传播虚假信息、谣言等。不要在留言板上透露自己或其他邻居的敏感个人信息。
					</p>
					<p>让我们在这个平台上共同营造一个温馨、和谐、充满活力的社区交流环境！</p>
				</div>
			</div>
		</div>
		<div style="flex: 10;display: flex;flex-direction:row;width:100%;">
			<el-card @click="goTopic(1)" style="max-width: 480px;flex: 1;" body-style="padding:0px;justify-self: center;align-items: center;">
				<Pet />
				<p class="tag">萌宠空间</p>
			</el-card>
			<el-card @click="goTopic(2)" style="max-width: 480px;flex: 1;"body-style="padding:0px;justify-self: center;align-items: center;">
                <ReNew style="margin: 20px;"/>
				
				<p class="tag">以旧换新</p>
			</el-card>
			<el-card @click="goTopic(3)" style="max-width: 480px;flex: 1;" body-style="padding:0px;justify-self: center;align-items: center;">
				<Child />
				<p class="tag">家用儿女</p>
			</el-card>
			<el-card @click="goTopic(4)" style="max-width: 480px;flex: 1;" body-style="padding:0px;justify-self: center;align-items: center;">
				<SecondHand />
				<p class="tag">二手物品</p>
			</el-card>
			<el-card @click="goTopic(5)" style="max-width: 480px;flex: 1;margin-right: 15px;" body-style="padding:0px;justify-self: center;align-items: center;">
				<Community />
				<p class="tag">社区治理</p>
			</el-card>
        </div>
			
	</div>
</template>


<script setup lang="ts">
	import Pet from './img/pet'
	import ReNew from './img/renew'
	import Child from './img/child'
	import SecondHand from './img/secondhand'
	import Community from './img/community'
	import router from '@/router'

	const goTopic= (item)=>{
		router.push({
				path:'/topic',
				query:{TopicId:item}
			})
	}
</script>

<style scoped lang="scss">
	.carousel-image {
		width: 75%;
		/* 图片宽度 */
		height: 100%;
		/* 图片高度 */
		border: 4px solid #fff;
		/* 图片边框 */
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		/* 图片阴影 */
		object-fit: cover;
		/* 覆盖整个容器，保持宽高比，裁剪多余部分 */
		object-position: 50% 50%;
		margin-left: 5px;

	}
    .el-card{
		margin-top: 20px;
		margin-bottom: 20px;
		margin-left: 15px;
		background-color: rgba(255, 255, 255, 1);
		box-shadow: 0 0 0;
		border: 1px solid #ffffff ;
		border-radius: 10px;
		justify-content: center;
		align-items: center;
	}
	.el-card:hover{
		background-color: #f8c27f;
	}
	
	.wood {

		background-color: #fff5e9;
		border-radius: 10px;
		/* 所有角都是半径为10px的圆角 */
		background-size: cover;
	}
    .tag{
		align-self: center;
		font-size: 1.5rem;
	}
	h1 {
		text-align: center;
		margin-top: 10px;
		margin-bottom: 15px;
		color: #000000;
		font-size: 2rem;
	}

	p {
		text-indent: 2em;
		font-size: 1.1rem;
	}
</style>